<link rel="stylesheet" href="../../css/spotlist.css">
<link rel="stylesheet" href="../../assets/css/datepicker.min.css">
<style type="text/css">
    .Date_lr{
        width:100%;
        text-align: center;
        overflow: hidden;
    }
    #checkinoutone{
        width: 40%;
        height: 50px;
        line-height: 50px;
        position: relative;
        margin: 10px;
        padding: 2px 0;
        display: -webkit-box;
        border: 1px solid #e5e5e5;
        border-radius: .02rem;
        background-color: #fff;
        float: right;
        display: none;
    }
    #selectone p{line-height:25px;color: #999;font-size:12px;}
    #startDateone{border:0;position: absolute;left: 0;margin: 0 auto;width: 100%;font-size: 16px;color: #05c0ad;text-align: center;}
    .mask_calendar {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.4);
        display: none;
        z-index: 9999;
    }
    .calendar {
        height: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    @keyframes slideInDown {
        from {
            transform: translate3d(0, -100%, 0);
            visibility: visible;
        }

        to {
            transform: translate3d(0, 0, 0);
        }
    }
</style>
<div class="body">
    <% for(var i=0;i<datas.length;i++){ %>
    <div class="hcls">
        <div class="descimg"
             style="background: url(<%= datas[i].spotimg%>) no-repeat;background-size: cover">
            <div class="spot-desc" id="spot-desc" >
                <div><span><%= datas[i].spotname%></span>
                    <img class="spot-more" src="../../images/more.png" width="100%"></div>
                <p><%= datas[i].spotdesc%></p>
            </div>
        </div>
        <ul class="scenicul">
            <% for(var j=0;j<datas2.length;j++){ %>
            <%  if(datas[i].spotid==datas2[j].spotid){%>
            <li>
                <img class="hcls1" src="<%=datas2[j].goodimg%>" width="100%">
                <p class="spotfont"><span class="yuan">￥</span><span
                            class="yuan"><%=datas2[j].price%></span> <s><span
                                class="zhe">￥</span><span
                                class="zhe"><%=datas2[j].discount%></span></s></p>
            </li>
            <%}%>
            <%}%>
        </ul>
    </div>
    <%}%>

    <div class="backcolor">
        <div></div>
    </div>

    <div id="sizechoose" class="sizechoose">
        <div class="tiptitle">
            <div class="tip">
                <h1>请选择活动时间</h1>
            </div>
        </div>
        <div class="select_contain">
            <div class="select_item left">
                <div style="width: 100%";>
                    <div class="select_result">
                        <div><span id="chooseresult" class="fontstyle" style="font-weight: 100">活动时长</span></div>
                        <div class="triangle"></div>
                    </div>
                    <ul id="choosetime">
                        <li class="day">上午</li>
                        <li class="day">下午</li>
                        <li class="day">一天</li>
                        <li class="day">自定义</li>
                    </ul>
                </div>
            </div>
            <div id="checkinoutone">
                <div id="selectone" style="width:100%;">
                    <div class="Date_lr" style="float:left;">
                        <P>时间选择</p>
                        <input id="startDateone" type="text" value=""style="" readonly>
                    </div>
                </div>
            </div>

        </div>
        <div class="mask_calendar">
            <div class="calendar"></div>
        </div>
    </div>
    <div class="bottom" style="width: 100%;height: 70px;"></div>

</div>
<script>
    $(function(){
        select();
        timeone();
        timetwo();
    function select(){
        $(document).click(function(){
            $(".select_module_con ul").slideUp();
        })
        var module=$(".select_result");
        module.click(function(e){
            e.stopPropagation();
            var ul=$(this).next();
            ul.stop().slideToggle();
            ul.children().click(function(e){
                e.stopPropagation();
                var timesize = $(this).text();
                $('#chooseresult').text(timesize);
                ul.stop().slideUp();
                if(timesize == '上午' || timesize == '下午' || timesize == '一天'){
                    $('#checkinoutone').show();
                }else {
                    $('#checkinoutone').hide();
                }
            })
        })
    }
    function timeone() {
        $('#selectone').on('click',function () {
            $('.mask_calendar').show();
            $('.sizechoose').css({'height':'60%'})
            $('.sizechoose').css({'width':'86%'})
        });
        $('.mask_calendar').on('click',function (e) {
            if(e.target.className == "mask_calendar"){
                $('.calendar').slideUp(200);
                $('.mask_calendar').fadeOut(200);
            }
        })
        $('#selectone').calendarSwitch({
            selectors : {
                sections : ".calendar"
            },
            index : 4,      //展示的月份个数
            animateFunction : "slideToggle",        //动画效果
            controlDay:true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber : "365",     //控制天数
            comeColor : "#2EB6A8",       //时选择间颜色
            callback :function(){//回调函数
                $('.mask_calendar').fadeOut(200);
            }  ,
            comfireBtn:'.comfire'//确定按钮的class或者id
        });
        var b=new Date();
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#startDateone').val(ye+'-'+mo+'-'+da);
    }
    function timetwo() {
        $('#firstSelect').on('click',function () {
            $('.mask_calendar').show();
        });
        $('.mask_calendar').on('click',function (e) {
            if(e.target.className == "mask_calendar"){
                $('.calendar').slideUp(200);
                $('.mask_calendar').fadeOut(200);
            }
        })
        $('#firstSelect').calendarSwitch({
            selectors : {
                sections : ".calendar"
            },
            index : 4,      //展示的月份个数
            animateFunction : "slideToggle",        //动画效果
            controlDay:true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber : "90",     //控制天数
            comeColor : "#2EB6A8",       //入住颜色
            outColor : "#2EB6A8",      //离店颜色
            comeoutColor : "#E0F4F2",        //入住和离店之间的颜色
            callback :function(){//回调函数
                $('.mask_calendar').fadeOut(200);
                var startDate = $('#startDate').val();  //入住的天数
                var endDate = $('#endDate').val();      //离店的天数
                var NumDate = $('.NumDate').text();    //共多少晚
                console.log(startDate);
                console.log(endDate);
                console.log(NumDate);
                //下面做ajax请求
                //show_loading();
                /*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
                    if(data.result==1){
                        //成功
                    } else {
                        //失败
                    }
                });*/
            }  ,
            comfireBtn:'.comfire'//确定按钮的class或者id
        });
        var b=new Date();
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#startDate').val(ye+'-'+mo+'-'+da);
        b=new Date(b.getTime()+24*3600*1000);
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#endDate').val(ye+'-'+mo+'-'+da);
    }
    })

</script>
